<style scoped>
    .layui-row {
        overflow: hidden;
    }
    .select-item {
        float: left;
        width: 100%;
        height: auto !important;
        word-break:break-all;
    }
    .layui-row:after, .layui-row:before {
        clear: none;
    }
    .layui-form >>> .layui-form-select{
        z-index: inherit;
    }
    .department >>> .layui-table td, .layui-table th {
        padding: 9px 2px;
        /*white-space: nowrap;*/
    }
    select{
        color: #eee
    }
    option{
        color: #000;
    }
    .layui-inline {
        padding: 5px 0;
    }
    .layui-colla-content {
        border-top: none;
    }
    .layui-colla-title {
        background: none;
        padding-left: 15px !important;
        height: auto;
    }
    .department >>> .layui-colla-icon {
        left: auto;
        right: 15px !important;
    }
    .layui-collapse {
        border: 0 !important;
    }
    /*.department {*/
    /*    position: relative;*/
    /*}*/
    .openicon {
        position: absolute;
        right: 15px;
        top: 10px;
        z-index: 100000;
        border-radius: 50%;
        color: #fff;
        width: 24px;
        text-align: center;
        height: 24px;
        line-height: 24px;
        background: rgba(0,150,136, 0.7);
    }
    .nodata {
        background: #f2f2f2;
        color: #333;
        text-align: center;
        padding: 5px 0;
    }
    .layui-table td p, .layui-table td .rj-cell {
        padding: 3px 0;
    }
    .layui-table td {
        text-align: left !important;
    }

    .rj-wrap {
        font-size: 0;
        width: 100%;
        padding: 0 10px;
        display: flex;
    }
    .cont-left {
        width: 73%;
        display: inline-block;
        font-size: 14px;
        padding: 10px;
    }
    .cont-right {
        width: 29%;
        display: inline-block;
        font-size: 14px;
        padding: 10px;
      background: #fafafa;
    }
    .cont-tit {
        font-size: 12px;
        padding: 5px 10px;
        color: #bbb;
    }
    .cont-box {
        background: #fff;
        margin: 10px 0;
    }
    .rj-cell {
        display: inline-block;
        padding: 5px 10px;
    }
    .attachimg {
        width: 80px;
        padding: 5px 10px;
        height: 80px;
    }
    .attachimg:hover {
        cursor: pointer;
    }

    .layui-elem-field legend.btns {
        position: absolute;
        right: 20px;
        top: -2px;
    }
</style>

<style scoped lang="scss">
.rule-input ::v-deep {
  .el-input__inner {
    border: 0;
    border-radius: 0px;
    width: 300px;
    &:focus {
      border-bottom: 1px solid #409eff;
    }
  }
};
.rule-input1 ::v-deep {
  .el-input__inner {
    border: 0;
    border-radius: 0px;
    width: 700px;
    font-size: 13px;
    &:focus {
      border-bottom: 1px solid #409eff;
    }
  }
};
.table .el-input {
  display: none;
}
.current-cell .el-input {
  display: block;
}
.current-cell .el-input + span {
  display: none;
}
</style>
<template>
      <div class="app-container">
        <p class="cont-tit">基础信息</p>

        <el-form ref="form" :model="form" label-width="120px" :inline="true" class="modalform">
          <el-form-item label="店铺名称" prop="name">
            <el-input v-model="d3productInfo.name" class="rule-input" readonly />
          </el-form-item>
          <el-form-item label="商品标题" prop="title">
            <el-input v-model="d3productInfo.title"  readonly class="rule-input1"/>
          </el-form-item>
          <br>
          <el-form-item label="规格属性" prop="standards" >
            <el-input v-model="d3productInfo.standards"  class="rule-input1" readonly />
          </el-form-item>
        </el-form>

<!--        <div>-->
<!--          <div class="rj-cell max"><label>店铺名称：</label><span>{{form.shopName}}</span></div>-->
<!--          <div class="rj-cell max"><label>商品标题：</label><span>{{form.title}}</span></div>-->
<!--        <div class="rj-cell"><label>规格属性：</label><span>{{form.standards}}</span></div>-->
<!--      </div>-->

        <p class="cont-tit">商品明细</p>
        <el-table :data="tableData" :border="true" >
<!--          <el-table-column label="erp品种" align="center" prop="productname" width="250"/>-->
          <el-table-column label="erp物料" align="center" prop="spName"/>
          <el-table-column label="数量" align="center" prop="weight" width="180">
            <template slot-scope="scope">
              <el-input  placeholder="请输入数量" size="small" v-model="scope.row.num">
                  <span slot="suffix" v-model="stockunit">{{scope.row.stockunit}}</span>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="单价" align="center" prop="weight" width="180">
            <template slot-scope="scope">
              <el-input  placeholder="请输入单价" size="small" v-model="scope.row.price">
                <span slot="suffix" v-model="stockunit">{{scope.row.stockunit}}</span>
              </el-input>
            </template>
          </el-table-column>
<!--          <el-table-column label="备注" align="center" prop="remark" width="370">-->
<!--            <template slot-scope="scope">-->
<!--              <el-input v-model="scope.row.remark" size="small" placeholder="请输入备注"/>-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column label="操作" align="center" prop="" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="doDel(scope.$index)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="tableAdd">添加商品</el-button>
          <el-button type="primary" @click="keepData">提 交</el-button>
        </div>

        <el-dialog title="物料明细" :visible.sync="specOpen" width="85%" append-to-body>
          <SalesspecificationItem :proptypeOptions="typeOptions" @doAddItem="addTable($event)"></SalesspecificationItem>
        </el-dialog>

        </div>
</template>

<script>
  import {getProduct,productAddAll,} from '@/api/d3/product'
  import {listProtosp,delProtosp} from '@/api/d3/protosp'
  import { getToken } from '@/utils/auth'
  import Vue from 'vue'
  import SalesspecificationItem from '@/components/SalesspecificationItem'

  let qs = require('qs');
    export default {
        name: 'addProduct',
        data () {
            return {
              loading: false,
              readonly:true,
              flowid: 26,
              purchaseId : null,
              form: {},
              isReady: false,
              //采购部门列表
              departments:[],
              orgs:[],
              typeOptions:[],
              specOpen:false,
              sRooms:[],
              types:[],
              projList:[],
              productTypes:[],
              productTypes111:[],
              productList:[],
              specList:[],
              stockunit:[],
              tableData:[],
              d3ProductId:'',
              upload: {
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
              },
              fileList: [],
              fileIds: [],
              popoverOffset: 0,
              d3productInfo:{},
              currFile: {},
              rulesForm:{
              },
              rules:{
                product:[{required:true,message:"产品不能为空",trigger:'blur'}],
                spec:[{required:true,message:'物料规格不能为空',trigger:'blur'}],
                weight:[{required:true,message:'数量不能为空',trigger:'blur'}],
                price:[{required:true,message:'单价不能为空',trigger:'blur'}]
              }
            }
        },
        components: {
          SalesspecificationItem,
        },
      created() {
            let that = this;
            this.d3ProductId=this.$route.query.id
            this.init();
        },
      watch:{
      },
        methods: {
          async init(){
            let typeData={dictLabel:'成品',dictValue:2};

            this.typeOptions.push(typeData)

            await this.getD3ProductInfo()
          },
          getD3ProductInfo(){
            getProduct(this.d3ProductId).then(response=>{
              this.d3productInfo=response.data;
              this.getInfo()
            })
          },
          getInfo(){
              listProtosp({shopId:this.d3productInfo.shopId,refspuid:this.d3productInfo.refspuid,refskuid:this.d3productInfo.refskuid}).then(response=>{
                if (response.code==200){
                  this.tableData=response.rows;
                }
              })
          },
          typeFormat(row, column) {
            return this.selectDictLabel(this.productTypes, row.productType);
          },
          tableDel(index){
            this.tableData.splice(index,1);
          },
          tableAdd(){
            this.specOpen=true;
          },
          addTable(specs){
            // console.log("specs:---------")
            // console.log(specs)
            specs.map((item,index)=>{
              let data={};
              data.productname=item.productname;
              data.spName=item.name;
              data.spId=item.autoId;
              data.shopId=this.d3productInfo.shopId;
              data.refspuid=this.d3productInfo.refspuid;
              data.refskuid=this.d3productInfo.refskuid;
              data.title=this.d3productInfo.title;
              data.standards=this.d3productInfo.standards;
              this.tableData.push(data)
            })
            this.specOpen=false;
          },
          keepData(){
            let that=this;
            that.$refs['form'].validate(valid=>{
              if (valid){
                let data=this.tableData
                for (let i = 0; i < that.tableData.length; i++) {
                  let checkItem=that.tableData[i];
                  if (!checkItem.price){
                    return that.msgError("请输入单价")
                  }
                  if (!checkItem.num){
                    return that.msgError("请输入数量")
                  }
                }
                that.$confirm("是否确认提交？","提示",{
                  confirmButtonText:'确认',
                  cancelButtonText:'取消',
                }).then(function(){
                  return productAddAll(data).then(response=>{
                    if (response.code==200){
                      that.msgSuccess("提交成功");
                      that.$store.dispatch('tagsView/delView', that.$route);
                      // console.log('$route:',that.$route)
                      that.$router.go(-1);
                      // window.location.reload();
                    }else {
                      that.msgError("提交失败！")
                    }
                  })
                })
              }
            })
          },
          doAdd(){
            this.tableData.push({},);
          },
          doDel(index){
            let that=this;
            if (that.tableData[index].id){
              that.$confirm("是否确认删除","警告",{
                confirmButtonText:'确认',
                cancelButtonText:'取消',
                type:'warning'
              }).then(function(){
                return delProtosp(that.tableData[index].id).then(response=>{
                  if (response.code==200){
                    that.tableData.splice(index,1)
                  }else {
                    this.msgError("删除失败！")
                  }
                })
              })
            }else {
              that.tableData.splice(index,1)
            }
          },
          cellClick(row, column, cell, event) {
            for(let i=0;i<document.getElementsByClassName('current-cell').length;i++){
              document.getElementsByClassName('current-cell')[i].classList.remove('current-cell');
            }
            cell.classList.add("current-cell");
          },
          removeClass(data, index, row){
            document.getElementsByClassName('current-cell')[0].classList.remove('current-cell');
          },
        }
    }
</script>
